<template>
  <div class="order-list">
    <div class="order-list-top">
      <el-form ref="findList" :inline="true" :model="findList" label-width="100px" class="findList">
        <el-form-item label="退款编号：" prop="backId" label-width="80px">
          <el-input v-model="findList.backId" placeholder="请输入退款编号" />
        </el-form-item>
        <el-form-item label="订单编号：" prop="orderId" label-width="80px">
          <el-input v-model="findList.orderId" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="买家名称：" prop="userName" label-width="80px">
          <el-input v-model="findList.userName" placeholder="请输入买家名称" />
        </el-form-item>
        <el-form-item label="退款类型：" prop="type" label-width="80px">
          <el-select v-model="findList.type" placeholder="请选择退款类型">
            <el-option label="已收货" value="0" />
            <el-option label="未收货" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit('findList')">查询</el-button>
          <el-button style="background:#F6F8F9" @click="resetForm('findList','hideForm')">重置</el-button>
        </el-form-item>

        <el-form-item>
          <div
            style="text-align:right;width:135px;color:#1890FF;cursor: pointer;"
            @click="screenShow()"
          >
            <div v-show="screenFlag">
              <span>收起更多筛选条件</span>
              <i class="el-icon-arrow-up" />
            </div>
            <div v-show="!screenFlag">
              <span>查看更多筛选条件</span>
              <i class="el-icon-arrow-down" />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <transition name="otherScreen">
        <el-form
          v-show="screenFlag"
          ref="hideForm"
          :inline="true"
          :model="hideForm"
          label-width="100px"
          class="otherScreen"
        >
          <el-form-item label="价格区间：" prop="priceRangeLeft" label-width="70px">
            <el-input
              v-model="hideForm.priceRangeLeft"
              placeholder="输入最低金额"
              class="wid149hei36"
              @blur="inputPriceJudge()"
            />
          </el-form-item>
          <span style="margin-left:8px">～</span>
          <el-form-item prop="priceRangeRight" style="margin-left:8px">
            <el-input
              v-model="hideForm.priceRangeRight"
              placeholder="请输入最高金额"
              class="wid149hei36"
              @blur="inputPriceJudge()"
            />&ensp;元
          </el-form-item>
        </el-form>
      </transition>
    </div>
    <div v-loading="disabled" class="order-list-content">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        style="padding-left:20px;"
        mode="horizontal"
        text-color="#3C4353"
        active-text-color="#1182FB"
        @select="handleSelect"
      >
        <el-menu-item style="font-size:14px;" index>全部售后订单</el-menu-item>
        <el-menu-item style="font-size:14px;" index="02000001">退款待处理</el-menu-item>
        <el-menu-item style="font-size:14px;" index="02000011">待买家发货</el-menu-item>
        <el-menu-item style="font-size:14px;" index="02000009">待商家收货</el-menu-item>
        <el-menu-item style="font-size:14px;" index="02000004">已完成退款</el-menu-item>
        <el-menu-item style="font-size:14px;" index="02000006">已拒绝退款</el-menu-item>
      </el-menu>
      <table v-loading="disabled" border="0" cellpadding="0" cellspacing="0" align="center">
        <thead>
          <tr>
            <th>商品</th>
            <th>商品单价</th>
            <th>商品数量</th>
            <th>买家</th>
            <th>退款类型</th>
            <th>交易金额</th>
            <th>退款金额</th>
            <th>退款状态</th>
          </tr>
        </thead>
        <tbody v-show="backMoneyList.length>0">
          <template v-for="(item, i) in backMoneyList">
            <tr :key="item.id" style="height:10px;" />
            <tr v-if="item.orderMdse&&item.orderMdse[0]" :key="i+9999999">
              <td colspan="8">
                <div class="content-title">
                  <div>
                    <span>退款编号：</span>
                    <div>{{ item.id }}</div>
                  </div>
                  <div>
                    <span>订单编号：</span>
                    <div>{{ item.orderShopId }}</div>
                  </div>
                  <div>
                    <span>商品编号：</span>
                    <div>{{ item.mdseId }}</div>
                  </div>
                  <div>
                    <span>申请时间：</span>
                    <div>{{ item.createDate|filterDate }}</div>
                  </div>
                  <div class="content-title-flag">
                    <div
                      style="width:22px;height:22px;"
                      @click="dialogFormVisible = true;remarks =item.shopRemakes;remarksId=item.id;rejectedShopId=item.rejectedShopId"
                    >
                      <el-tooltip
                        v-if="item.shopRemakes"
                        class="item"
                        effect="light"
                        placement="top-end"
                        popper-class="tips"
                      >
                        <div
                          slot="content"
                          class="test-o"
                          style="max-width:212px;"
                        >{{ item.shopRemakes?item.shopRemakes:'' }}</div>
                        <img :src="require('@/assets/images/icon-flag-true.png')" alt>
                      </el-tooltip>
                      <img v-else :src="require('@/assets/images/icon-flag-false.png')" alt>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr v-if="item.orderMdse&&item.orderMdse[0]" :key="i" class="content-list-tr" @mouseenter="enter" @mouseleave="leave">
              <td>
                <div class="content-list-img">
                  <el-image
                    style="min-width: 80px;max-width:80px; height: 80px"
                    :src="qnPath(item.orderMdse[0].image)"
                    fit="fill"
                  >
                    <div slot="error" class="image-slot">
                      <img style="min-width: 80px;max-width:80px; height: 80px" :src="require('../../assets/images/background-upload-false.png')" alt="">
                    </div>
                  </el-image>
                  <div>
                    <div style="cursor:pointer;" @click="toDetail(item.id)">{{ item.orderMdse[0].name }}</div>
                    <p>规格：{{ item.orderMdse[0].propertyValueName }}</p>
                  </div>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ item.orderMdse[0].unitPrice|fixedPrice }}</span>
                </div>
              </td>
              <td>
                <div>
                  <span>{{ item.orderMdse[0].buyNum }}</span>
                </div>
              </td>
              <td>
                <div>
                  <div>{{ item.buyer }}</div>
                  <div style="padding-top:10px;">
                    <router-link :to="{name: 'Chat', query: {to: item.phone}}"><img style="width:63px;height:20px;cursor:pointer;" :src="require('@/assets/images/icon-btn-callme.png')" alt></router-link>
                  </div>
                </div>
              </td>
              <td>
                <div>
                  <h4
                    style="margin-top:0;margin-bottom:5px;"
                  >{{ item.takeover==="0"? "仅退款":"退货退款" }}</h4>
                  <p style="color:#838A9D;">{{ item.rejectedRemark }}</p>
                </div>
              </td>
              <td>
                <div>
                  <div
                    style="font-weight:600;margin-bottom:10px;"
                  >{{ item.orderMdse[0].buyNum * item.orderMdse[0].unitPrice|fixedPrice }}</div>
                  <div
                    v-if="false"
                    style="color:#838A9D;line-height:27px;"
                  >(含运费:{{ item.trafficPrice|fixedPrice }})</div>
                  <div style="color:#F56A6D;">{{ item.sendOut==='02000001'?'未发货':'已发货' }}</div>
                </div>
              </td>
              <td>
                <div>
                  <span style="color:#E02B2B;font-weight:600;">{{ item.applyAmount|fixedPrice }}</span>
                </div>
              </td>
              <td>
                <div>
                  <div>
                    <img
                      v-show="item.rejectedStatus==='02000011'?true:false"
                      :src="require('@/assets/images/icon-goods-buy.png')"
                      alt
                    >
                    <img
                      v-show="item.rejectedStatus==='02000001'||item.rejectedStatus==='02000002'||item.rejectedStatus==='02000012'?true:false"
                      :src="require('@/assets/images/icon-goods-sell.png')"
                      alt
                    >
                    <img
                      v-show="item.rejectedStatus==='02000009'?true:false"
                      :src="require('@/assets/images/icon-goods-shop.png')"
                      alt
                    >
                    <!-- 0（已拒绝）1（已退款）2(等待卖家处理)3（等待买家发货）4（等待商家收货） -->
                    <a
                      v-if="item.rejectedStatus==='02000001'?true:item.rejectedStatus==='02000002'?true:item.rejectedStatus==='02000011'?true:item.rejectedStatus==='02000012'?true:item.rejectedStatus==='02000009'?true:false"
                      @click="toDetail(item.id)"
                    >
                      <span style="color:#1890FF;">{{ item.rejectedStatus|filterRefundStatus }}</span>
                    </a>
                    <span v-else>{{ item.rejectedStatus|filterRefundStatus }}</span>
                  </div>
                  <p style="color:#F56A6D;margin-top:10px;">
                    <span
                      v-if="item.rejectedStatus==='02000001'?true:item.rejectedStatus==='02000002'?true:item.rejectedStatus==='02000011'?true:item.rejectedStatus==='02000012'?true:item.rejectedStatus==='02000009'?true:false"
                    >
                      <span ref="countdown">{{ item.endDate|countdown }}</span>
                    </span>
                    <el-link v-else :underline="false" type="primary">
                      <a @click="toDetail(item.id)">详情</a>
                    </el-link>
                  </p>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
      <div v-show="backMoneyList.length<=0" class="none">
        <div>
          <el-image :src="require('../../assets/images/none-order-list.png')" />
          <div style="font-weight:600;color:#3C4353;margin:16px 0 8px 0;font-size:18px;">暂无订单</div>
          <div>您还没有相关订单哦~</div>
        </div>
      </div>
      <!-- 分页 -->
      <div v-show="backMoneyList.length>0" class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="noticeCount"
          :hide-on-single-page="true"
          :page-sizes="[6,10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 遮罩层 -->
    <el-dialog :title="remarks?'修改备注':'添加备注'" :visible.sync="dialogFormVisible">
      <div class="detail-change-remark">
        <div>备注内容：</div>
        <div class="detail-content">
          <el-input
            v-model="remarks"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 200}"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="remarksAdd()">确认添加</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderRejected, updateOrderRejected } from '@/api/order';
import { getDate, getTime } from '@/utils/date';
import { mapGetters } from 'vuex';
export default {
  filters: {
    countdown: value => {
      const momentTime = new Date();
      const nowtime = (momentTime.getTime() - 1000) / 1000; // 当前时间 毫秒数
      const totalSeconds = value / 1000 - nowtime;

      const day = parseInt(totalSeconds / 3600 / 24); // 天
      let hour = parseInt((totalSeconds / 3600) % 24); // 时
      let minute = parseInt((totalSeconds / 60) % 60); // 分
      let second = parseInt(totalSeconds % 60); // 秒
      let residueTime =
        '还剩' + day + '天 ' + hour + '时 ' + minute + '分 ' + second + '秒';
      hour = addZeroPrefix(hour);
      minute = addZeroPrefix(minute);
      second = addZeroPrefix(second);
      if (totalSeconds < 0) {
        residueTime = '时间到';
      }
      function addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number;
      }
      return residueTime;
    },
    filterDate: function(value) {
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date);
    },
    // 过滤售后退款的退款状态
    filterRefundStatus: function(value) {
      switch (value) {
        case '02000001':
          return '等待卖家处理';
        case '02000002':
          return '等待卖家处理';
        case '02000012':
          return '等待卖家处理';
        case '02000011':
          return '等待买家发货';
        case '02000003':
          return '已退款';
        case '02000009':
          return '等待商家收货';
        case '02000004':
          return '已退款';
        case '02000005':
          return '已退款';
        case '02000007':
          return '已拒绝';
        case '02000008':
          return '退款关闭';
        case '02000010':
          return '已拒绝';
        case '02000006':
          return '已拒绝';
        default:
          return '未知情况';
      }
    }
  },
  data() {
    return {
      findList: {
        backId: '',
        orderId: '',
        userName: '',
        type: ''
      },
      hideForm: {
        priceRangeLeft: '',
        priceRangeRight: ''
      },
      screenFlag: false,
      activeIndex: '',
      // remarks:0(无备注，显示false旗帜)1（有备注）
      // sendOut:0(未发货)1（已发货）
      // backState:0（已拒绝）1（已退款）2(等待卖家处理)3（等待买家发货）4（等待商家收货）
      backMoneyList: [{}],
      // 最终价格
      priceX: '',
      // 分页
      currentPage: 1,
      pageSize: 6,
      noticeCount: 0,
      remarksId: '',
      // 每页多少条
      muchData: 6,
      // 当前页码
      momentPage: 1,
      // 遮罩层
      remarks: '',
      dialogFormVisible: false,
      flag: false,
      disabled: false,
      rejectedShopId: ''
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  created() {
    // 实例被创建之后执行代码
    this.getTimeList();
    if (this.$router.currentRoute.query.status) {
      this.activeIndex = this.$router.currentRoute.query.status;
      this.handleSelect(this.activeIndex);
    } else {
      this.getList();
    }
  },
  beforeDestroy() {
    // 组件的销毁
    clearInterval(window.timeId); // 清除定时器
    window.timeId = null;
  },
  methods: {
    // hover test
    enter(e) {
      e.target.style.transition = 'background 0.3s';
      e.target.style.background = '#F2F7FF';
    },
    leave(e) {
      e.target.style.background = '#fff';
    },
    // 点击查询按钮
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.flag = true;
          // 价格区间判断
          this.priceChangeJudge();
          this.getList(
            1,
            this.muchData,
            this.activeIndex,
            this.findList.backId,
            this.findList.orderId,
            this.findList.userName,
            this.findList.type,
            this.priceX
          );
          this.momentPage = 1;
        } else {
          return false;
        }
      });
    },
    // 重置表单（表头）
    resetForm(formName, formSecond) {
      this.$refs[formName].resetFields();
      this.$refs[formSecond].resetFields();
    },
    // 隐藏显示更多筛选
    screenShow() {
      this.screenFlag = !this.screenFlag;
    },
    // 表单的位置
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      // 价格区间判断
      this.disabled = true;
      this.flag
        ? this.getList(
          1,
          this.muchData,
          this.activeIndex,
          this.findList.backId,
          this.findList.orderId,
          this.findList.userName,
          this.findList.type,
          this.priceX
        )
        : this.getList(this.momentPage, this.muchData, this.activeIndex);
      this.momentPage = 1;
      this.currentPage = 1;
    },
    // 判断输入价格
    inputPriceJudge() {
      if (!this.hideForm.priceRangeRight) {
        return;
      }
      if (
        parseFloat(this.hideForm.priceRangeLeft) >
        parseFloat(this.hideForm.priceRangeRight)
      ) {
        let flag = 0;
        flag = this.hideForm.priceRangeLeft;
        this.hideForm.priceRangeLeft = this.hideForm.priceRangeRight;
        this.hideForm.priceRangeRight = flag;
      }
    },
    // 获取列表
    getList(
      pageNo = 1,
      pageSize = 6,
      rejectedStatus = '',
      id = '',
      orderShopId = '',
      buyer = '',
      takeover = '',
      price = ''
    ) {
      this.priceChangeJudge();
      this.disabled = true;
      // {"rejectedShopId":"退款商户订单ID","orderShopId":"商户订单ID","buyer":"买家","takeover":"买0已收货  1未收货"}
      const param = {
        pageNo,
        pageSize,
        rejectedStatus,
        id,
        orderShopId,
        buyer,
        takeover,
        price,
        shopId: this.shopInfo.id
      };
      getOrderRejected(param).then(res => {
        this.noticeCount = res.data.size;
        this.backMoneyList = res.data.orderrejecteds;
        this.disabled = false;
      });
    },
    // 每页多少条
    handleSizeChange(val) {
      this.muchData = val;
      // 价格区间判断
      this.momentPage = 1;
      this.currentPage = 1;
      this.flag
        ? this.getList(
          1,
          this.muchData,
          this.activeIndex,
          this.findList.backId,
          this.findList.orderId,
          this.findList.userName,
          this.findList.type,
          this.priceX
        )
        : this.getList(this.momentPage, this.muchData, this.activeIndex);
    },
    // 当前页码
    handleCurrentChange(val) {
      this.momentPage = val;
      // 价格区间判断
      this.priceChangeJudge();
      this.flag
        ? this.getList(
          1,
          this.muchData,
          this.activeIndex,
          this.findList.backId,
          this.findList.orderId,
          this.findList.userName,
          this.findList.type,
          this.priceX
        )
        : this.getList(this.momentPage, this.muchData, this.activeIndex);
    },
    // 价格判断
    priceChangeJudge() {
      if (this.hideForm.priceRangeLeft && this.hideForm.priceRangeRight) {
        this.priceX = `${this.hideForm.priceRangeLeft * 100}～${this.hideForm
          .priceRangeRight * 100}`;
      } else if (
        this.hideForm.priceRangeRight &&
        !this.hideForm.priceRangeLeft
      ) {
        this.priceX = `0～${this.hideForm.priceRangeRight * 100}`;
      } else if (
        !this.hideForm.priceRangeRight &&
        this.hideForm.priceRangeLeft
      ) {
        this.priceX = `${this.hideForm.priceRangeLeft * 100}～999999999`;
      } else {
        this.priceX = '';
      }
    },
    // 倒计时
    getTimeList() {
      window.timeId = setInterval(() => {
        this.backMoneyList.forEach(item => {
          if (item.orderMdse) {
            item.orderMdse.createDate =
              parseFloat(item.orderMdse.createDate) - 0.001;
          }
        });
      }, 1000);
    },
    toDetail(value) {
      sessionStorage.setItem('afterSaleDetail', value);
      this.$router.push('/order/detail_after');
    },
    // 添加备注
    remarksAdd() {
      // {"rejectedStatus":"修改订单状态","refuseReason":"拒绝原因","shopRemakes":"备注","refuseReasonImage":"图片","rejectedShopId":","shopId":"店铺id"}
      const param = {
        shopRemakes: this.remarks,
        shopId: this.shopInfo.id,
        rejectedShopId: this.rejectedShopId
      };
      updateOrderRejected(param).then(res => {
        if (res.code === '0000') {
          this.$message.success('修改备注成功！');
          this.flag
            ? this.getList(
              this.momentPage,
              this.muchData,
              this.activeIndex,
              this.findList.backId,
              this.findList.orderId,
              this.findList.userName,
              this.findList.type,
              this.priceX
            )
            : this.getList(this.momentPage, this.muchData, this.activeIndex);
        } else {
          this.$message.error('修改备注失败！');
        }
        this.dialogFormVisible = false;
        this.getDetail();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
p {
  padding: 0;
  margin: 0;
}
.order-list {
  background: #f1f5f9;
  color: #3c4353;
  margin-bottom: 30px;
  .order-list-top {
    border-radius: 3px;
    overflow: hidden;
    .el-form {
      min-width: 1660px;
      max-width: 100%;
      height: 70px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      padding: 10px;
      display: flex;
      align-items: center;
      .el-form-item {
        font-size: 14px;
        margin: 0;
        margin-left: 15px;

        .el-icon-arrow-down {
          color: #1890ff;
          width: 11px;
          height: 8px;
        }
        .el-input {
          min-width: 150px;
          height: 36px !important;
          border-radius: 4px;
          /deep/.el-input__inner {
            height: 36px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            height: 36px;
            width: 170px;
          }
        }
        .el-button {
          width: 80px;
          height: 34px;
          background: rgba(17, 130, 251, 1);
          border-radius: 3px;
          margin-top: 2px;
          padding: 0;
        }
        /deep/.el-form-item__label {
          padding: 0;
          color: #3c4353;
        }
      }
    }
    .otherScreen {
      height: 70px;
      width: 100%;
      background: #fff;
      padding-top: 0;
      transition: height 0.3s;
      .el-form-item {
        .el-date-editor {
          width: 224px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          /deep/.el-input__inner {
            width: 224px !important;
            height: 36px !important;
          }
        }
        .wid149hei36 {
          width: 149px;
          /deep/.el-input__inner {
            width: 149px;
          }
        }
      }
    }
    .findList {
      display: flex;
      flex-flow: row nowrap;
    }
    //动画
    .otherScreen-enter-active,
    .otherScreen-leave-active {
      transition: opacity 0.5s;
    }
    .otherScreen-enter,
    .otherScreen-leave-to {
      opacity: 0;
    }
  }
  .order-list-content {
    margin-top: 10px;
    background-color: #fff;
    min-height: calc(100vh - 306px);
    .el-menu {
      .el-menu-item {
        height: 70px;
        margin: 0 13px;
        font-size: 16px;
        font-weight: 500;
        line-height: 70px;
        padding: 7px;
      }
    }
    table {
      font-size: 14px;
      background: #fff;
      width: 100%;
      padding: 20px 2% 0 2%;
      thead {
        background: #f6f8f9;
        th {
          height: 50px;
          font-weight: 600;
          border-top: 1px solid #dce1ee;
          border-bottom: 1px solid #dce1ee;
          &:first-child {
            text-align: left;
            text-indent: 40px;
            border-left: 1px solid #dce1ee;
          }
          &:last-child {
            border-right: 1px solid #dce1ee;
          }
        }
      }
      tbody {
        .content-title {
          background-color: #e8f1ff;
          height: 50px;
          line-height: 50px;
          padding-left: 40px;
          display: flex;
          font-weight: 600;
          border: 1px solid #e4e9ef;
          & > div {
            display: flex;
            flex-flow: row nowrap;
            margin-left: 80px;
            &:first-child {
              margin-left: 0;
            }
          }
          .content-title-flag {
            width: 22px;
            flex: 1;
            position: relative;
            & > div {
              position: absolute;
              cursor: pointer;
              right: 60px;
              top: 50%;
              margin-top: -20px;
            }
          }
        }
        .content-list-tr {
          td {
            border-left: 1px solid #e4e9ef;
            border-bottom: 1px solid #e4e9ef;
            padding: 20px 0 20px 0;
            text-align: center;
            min-height: 120px;
            & > div {
              min-height: 80px;
            }
            &:first-child {
              width: 420px;
              padding-left: 40px;
              text-align: left;
            }
            &:last-child {
              border-right: 1px solid #e4e9ef;
            }
            &:nth-child(2),
            &:nth-child(3) {
              border-left: none;
            }
            .content-list-img {
              display: flex;
              flex-flow: row nowrap;
              & > div {
                div {
                  margin-left: 20px;
                  line-height: 22px;
                }
                p {
                  margin-left: 20px;
                  padding-top: 10px;
                  color: #838a9d;
                }
              }
            }
          }
        }
      }
    }
    .none {
      display: flex;
      justify-content: center;
      width: 100%;
      min-height: 54vh;
      align-items: center;
      /deep/.el-image {
        width: 150px;
        height: 150px;
      }
      & > div {
        display: flex;
        align-items: center;
        flex-flow: column nowrap;
        font-size: 16px;
        color:#838A9D;
      }
    }
  }
}
.content-list-last {
  display: flex;
  justify-content: center;
  span {
    margin-left: 3px;
  }
}
//分页
.pagination {
  margin-top: 18px;
  text-align: center;
  border-top: 1px solid #e4e9ef;
  padding-top: 28px;
  padding-bottom: 10px;
}
.main-product-icon {
  width: 77px;
  height: 20px;
  background: rgba(230, 247, 255, 1);
  border-radius: 11px;
  text-align: center;
  color: #1182fb;
}
.stock-less-icon {
  display: inline-block;
  width: 66px;
  height: 20px;
  text-align: center;
  position: relative;
  top: 5px;
  div {
    background: rgba(247, 87, 87, 1);
    border-radius: 10px;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  span {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    color: #e9433a;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0.8;
  }
}
//遮罩层
/deep/.el-dialog {
  width: 600px;
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 32px 0 0 70px !important;
}
/deep/.el-dialog__footer {
  text-align: left;
  padding: 0 0 50px 140px;
}
.detail-change-remark {
  display: flex;
  .detail-content {
    width: 400px;
    height: 150px;
  }
  .el-input {
    width: 400px;
    height: 150px;
  }
}
</style>
